<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-04 13:45
 * @LastEditTime: 2021-10-02 18:06:47
  *@LastEdititors
-->
<template>
  <div id="welcome" :style="{height:$inerHeight+ 100 + 'px'}">
    <div class="top"  v-if="showlogo">
      <img :src="logoImgUrl" alt="启动图">
    </div>
    <transition name="fade">
      <div class="top" v-if="!showlogo">
        <img :src="launchImgUrl" alt="封面图">
        <div class="tiaoguo" @click="tiaoGuo">
          跳过 <span>{{number}}</span>
        </div>
        <div class="copy">
          <span>&copy; </span>{{copy}}
        </div>
      </div>
    </transition>
    <div class="bottom">
      <img src="/static/logo.png" alt="商标图">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userId: '',
      isLogin: false,
      launchImgUrl: '',
      logoImgUrl: '',
      copy: '',
      number: 5, // 跳过上面的按钮
      showlogo: true // 首先是展示logo封面图
    }
  },
  created () {
    let that = this
    this.apis.getLanuch().then((res) => {
      if (res.code === 200) {
        this.launchImgUrl = res.launchImgUrl
        this.logoImgUrl = res.logoImgUrl
        this.copy = res.copy
        setTimeout(() => {
          that.showlogo = false
          let interVal = setInterval(() => {
            that.number--
            if (that.number === 0) {
              clearTimeout(interVal)
              that.tiaoGuo()
            }
          }, 1000)
        }, 3000)
      }
    })
  },
  methods: {
    tiaoGuo () {
      this.userId = localStorage.getItem('userId')
      // 如果没登录去登录界面
      if (this.userId === null) {
        this.toNewPage('/login')
      } else {
        this.toNewPage('/home')
      }
    }
  }
}
</script>

<style scoped lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#welcome{
  width: 100%;
  overflow hidden
  position: relative
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .fade-enter-active
  {
    opacity: 1;
  }
  .top{
    position relative
    img{
      width 100%
      height:220px;
    }
    .copy
    {
      min-width 20px
      line-height 10px
      background-color rgba(0, 0, 0, 0.5)
      position absolute
      padding 2px 2px
      left 5px
      bottom 5px
      color snow
      font-size 6px
      span
      {
        font-size 6px
      }
    }
    .tiaoguo
    {
      width 25px
      line-height 12px
      color snow
      background-color rgba(0, 0, 0, 0.5)
      position absolute
      top: 5px
      right 5px
      span
      {
        color deeppink
      }
    }
  }
  .bottom{
    width 100%
    padding 5px 0px
    img
    {
      margin 0px auto
      width 100px
      height:40px;
    }
  }
}
</style>
